<template>
    <view class="all">
        <view class="backImg headBox">
            <!-- //transparent -->
            <CustomHead mainColor="#ffd1d1" :hasBack="false">
                <!-- <view class="pageTit"><text class="">{{pageTitle}}</text></view> -->

                <view class="head-part">
                    <view class="ipt" @click="$goNext('/pages/search/index')">
                        <text class="iconfont icon-sousuo"></text>
                        <text>搜索</text>
                    </view>
                    <view class="logoBox">
                        <image :src="logoUrl" mode="aspectFit"></image>
                    </view>
                </view>
            </CustomHead>

            <view class="head-content">
                <!-- <view class="emptPart">

                </view> -->

                <view class="mySwiperBox" :style="'height:' + myScrollHeight + 'px'">
                    <swiper class="mySwiper" :indicator-dots="true" :autoplay="true" indicator-color="rgba(255, 255, 255, .3)" indicator-active-color="#ff0000" circular @change="swiperChange">
                        <swiper-item v-for="(item, idx) in imgUrls" :key="idx">
                            <view class="shuffing-item" @click="goProductCate(item)">
                                <image :src="item.url" mode="widthFix"></image>
                            </view>
                        </swiper-item>
                    </swiper>
                </view>

                <view class="fixedMsg" v-if="!hideLunboMsg">
                    <BuysLunbo></BuysLunbo>
                </view>
            </view>
        </view>

        <view class="page-content">
            <view class="four-img">
                <view class="four-i">
                    <view class="img-box">
                        <image src="/static/images/nav/shangwu.png" mode="aspectFit" alt=""></image>
                    </view>

                    <!-- <image class="" src="" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" /> -->
                    <view class="words">
                        <text>商务往来</text>
                    </view>
                </view>
                <view class="four-i">
                    <view class="img-box">
                        <image src="/static/images/nav/jieri.png" mode="aspectFit" alt=""></image>
                    </view>
                    <view class="words">
                        <text>节日送礼</text>
                    </view>
                </view>
                <view class="four-i">
                    <view class="img-box">
                        <image src="/static/images/nav/liwu.png" mode="aspectFit" alt=""></image>
                    </view>
                    <view class="words">
                        <text>生日礼物</text>
                    </view>
                </view>
                <view class="four-i">
                    <view class="img-box">
                        <image src="/static/images/nav/zhangbei.png" mode="aspectFit" alt=""></image>
                    </view>
                    <view class="words">
                        <text>送长辈</text>
                    </view>
                </view>
                <view class="four-i">
                    <view class="img-box">
                        <image src="/static/images/nav/guanliyuan.png" mode="aspectFit" alt=""></image>
                    </view>
                    <view class="words">
                        <text>送员工</text>
                    </view>
                </view>
            </view>

            <!-- <official-account></official-account> -->

            <view class="commonTit">
                <view class="left">
                    <text class="tit">为您推荐</text>
                </view>
                <!-- <view class="right" @click="$goNext('/pages/supermarket/index')">
                    <text>更多>></text>
                </view> -->
            </view>

            <ProductShow :productArr="recommenArr"></ProductShow>

            <view class="commonTit">
                <view class="left">
                    <text class="tit">精品好蟹</text>
                </view>
                <!-- <view class="right" @click="$goNext('/pages/supermarket/index')">
                    <text>更多>></text>
                </view> -->
            </view>

            <ProductShow :productArr="productArr"></ProductShow>
        </view>
        <authorize :show.sync="showAuth"></authorize>

        <GetPhone :isShow.sync="showAuthorize"></GetPhone>

        <StartPage v-if="initMask" />

        <!-- <Notice/> -->

        <!-- <RedBag ref='RedBag'/> -->

        <UserProfile />

        <PrivacyContract :initShow="true" />

        <ToTop :show="topShow" />
    </view>
</template>

<script>
    const app = getApp();

    import CustomHead from '@/components/CustomHead/slotHead';

    import authorize from '@/components/authorize';
    import GetPhone from '@/components/GetPhone';

    // import WxPushMessage from '@/utils/message.js'
    import UserHead from '@/components/UserHead';
    import ProductShow from '@/components/ProductShow';
    import RedBag from '@/components/RedBag/redImg';
    import BuysLunbo from '@/components/BuysLunbo';
    // import Notice from '@/components/Notice'
    import StartPage from '@/components/LoadMask/startPage';
    import PrivacyContract from '@/components/PrivacyContract';
    import UserProfile from '@/components/UserProfile';

    import { GoodsList, RecommedGoods } from '@/api/http';
    import ToTop from '@/components/ToTop';
    export default {
        components: { authorize, CustomHead, GetPhone, UserHead, ProductShow, RedBag, BuysLunbo, StartPage, PrivacyContract, UserProfile, ToTop },
        data() {
            return {
                topShow: false,
                supermarketId: app.globalData.supermarketId, //超市ID

                initMask: false,
                loading: true, //加载中
                avatarUrl: undefined,
                showAuth: false,

                imgUrls: [{ url: 'http://192.168.8.10:8700/sex_imgs/111.jpeg' }, { url: 'http://192.168.8.10:8700/sex_imgs/222.jpeg' }, { url: 'http://192.168.8.10:8700/sex_imgs/333.jpeg' }],
                logoUrl: 'http://192.168.8.10:8700/sex_imgs/app/logo.png',
                showImagArr: [],
                currentImg: 0,
                customHight: 0,
                showAuthorize: false,
                //搜索关键词
                productName: '',
                //数据统计
                staticShopNums: {},

                pageTitle: '',
                productArr: [],
                productTotal: 0,

                myScrollHeight: '',

                hideLunboMsg: true,
                //为您推荐
                recommenArr: []
            };
        },
        computed: {
            // accountType () { return this.$store.getters.accountType },
            userId() {
                return this.$store.getters.userId;
            }
        },
        onPageScroll(e) {
            // console.log('滚到',this.imgUrls)

            this.topShow = e.scrollTop > 100;
        },
        onShow() {
            app.laterToken(bool => {
                if (bool) {
                    if (!app.globalData.initOutTips) {
                        app.globalData.initOutTips = true;
                    }
                }

                this.hideLunboMsg = false;

                this.getRecommonList();

                this.getProductPage();

                app.logRecord('首页');
            });
        },
        onLoad(option) {
            //有推荐人
            if (option.recommeId) {
                app.globalData.recommeId = option.recommeId;
            }

            this.initPage();

            this.loading = false;

            this.showImagArr = this.imgUrls;

            // this.getShopDetail()
        },
        methods: {
            initPage() {
                // 获取窗口信息
                let getWindowInfo = uni.getWindowInfo();

                this.myScrollHeight = getWindowInfo.screenWidth / 1.665;

                // console.log(getWindowInfo.screenHeight);//屏幕高度
                // console.log(getWindowInfo.screenWidth);//屏幕宽度
                // console.log(getWindowInfo.windowHeight);//可操作页面高度
                // console.log(getWindowInfo.windowWidth);//可操作页面宽度
                // console.log(getWindowInfo);
                // console.log('获取窗口信息',getWindowInfo);
            },

            //获取商品列表
            getProductPage(cb) {
                // RecommedGoods

                GoodsList({ pageNum: 1, pageSize: 8, commonStatusList: [1] }).then(response => {
                    this.productArr = response.data.map(item => {
                        item.listPictureSrc = this.$getImg(item.listPicture);

                        item.isJingpin = (item.goodsName || '').includes('精品');

                        item.tagsArr = (item.remark || '').split(/,|，|;/g);
                        item.labelArr = (item.productLabelTypeName || '').split(/,|，|;/g);

                        return item;
                    });

                    this.productTotal = response.total;

                    // cb && cb()
                });
            },
            //为您推荐的列表
            getRecommonList() {
                RecommedGoods({ pageNum: 1, pageSize: 8, openId: app.getOpenID() }).then(response => {
                    this.recommenArr = response.data.map(item => {
                        item.listPictureSrc = this.$getImg(item.listPicture);

                        item.isJingpin = (item.goodsName || '').includes('精品');

                        item.tagsArr = (item.remark || '').split(/,|，|;/g);
                        item.labelArr = (item.productLabelTypeName || '').split(/,|，|;/g);

                        return item;
                    });
                });
            },

            swiperChange(e) {
                let current = e.detail.current;

                this.currentImg = current;
                this.cateIdx = current;
            },

            goDetail(row) {
                this.$goNext('/pages/supermarket/product/index?id=' + row.id);
            },

            //如果没登录走这里
            goShare() {
                if (this.userId) {
                    this.$goNext('/pages/authInfo/index');
                } else {
                    this.showAuthorize = true;
                }

                return;
            },
            //打开授权框
            openAuthFunc() {
                this.showAuthorize = true;
            },
            //分享
            onShareAppMessage(obj) {
                return {
                    title: `甜城小二(大闸蟹同城配送)`
                };
            },
            onShareTimeline() {
                return {
                    title: '甜城小二(大闸蟹同城配送)'
                };
            },
            //下拉刷新
            onPullDownRefresh() {
                this.getProductPage(() => {
                    uni.stopPullDownRefresh(); //停止刷新
                });
            },
            viewImgs() {
                uni.previewImage({
                    current: 0,
                    urls: ['https://cdn2.qmxip.com/pc/assets/images/code_wx.png']
                });
            }
        },
        onHide() {
            console.log('11111111隐藏主页');

            this.hideLunboMsg = true;
        }
    };
</script>

<style scoped lang="scss">
    .backImg {
        width: 100%;
        // height: 500rpx;
        // background: url("https://oss.qmxip.com/flash_goods/1153265907506057216.jpg")
        //     0 0 no-repeat;
        // border-radius: 0 0 30rpx 30rpx;
        overflow: hidden;
    }
    .head-part {
        position: relative;
        background: #ffd1d1;
        width: 100%;
        image {
            height: 70rpx;
            width: 100%;
        }
        .ipt {
            position: absolute;
            left: 0px;
            top: 50%;
            transform: translateY(-50%);
            background: #f5f5f5;
            border-radius: 40px;
            width: 80px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            color: #999;
            font-size: 26rpx;
            padding: 0 30rpx;
            .iconfont {
                font-size: 28rpx;
            }
        }
    }
    .headBox {
        .pageTit {
            font-size: 40rpx;
            font-weight: bold;
            color: #fff;
        }
        .head-content {
            position: relative;
            padding: 0rpx 0rpx 20rpx;
            .emptPart {
                background: #fff;
                width: 100%;
                border-radius: 30rpx;
                height: 60rpx;
            }
            .mySwiperBox {
                font-size: 0;
            }

            .mySwiper {
                box-sizing: border-box;
                height: 100%;
                margin: 0rpx 0rpx;
                .shuffing-item {
                    width: 100%;
                    height: 100%;
                    transition: all 0.3s;
                    background: #fff;
                    image {
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }

    .all {
        min-height: 100vh;
        // background: rgb(246, 246, 246);
        background: #f6f6f6;
        box-sizing: border-box;
    }
    .fixedMsg {
        position: absolute;
        right: 10rpx;
        top: 10rpx;
        z-index: 10;
        width: 100%;
        height: 1rpx;
    }
    .page-content {
        position: relative;
        padding: 20rpx 30rpx 80rpx;
        .four-img {
            background: rgba(253, 246, 241, 0.8);
            position: relative;
            // margin-top: -100rpx;
            width: 100%;
            border-radius: 14rpx;
            display: flex;
            padding: 40rpx 0;
            .four-i {
                flex: 1;
                text-align: center;
                .img-box {
                    display: inline-block;
                    width: 100rpx;
                    height: 100rpx;
                    line-height: 100rpx;
                    border-radius: 35%;
                    background: #fff;
                    text-align: center;
                    box-shadow: 0 10px 20px 0px #f7d7df;
                    margin-bottom: 30rpx;
                    image {
                        width: 60rpx;
                        height: 60rpx;
                        vertical-align: middle;
                    }
                }

                .words {
                    font-size: 26rpx;
                    color: #999;
                }
            }
        }
    }
    .commonTit {
        overflow: hidden;
        padding: 30rpx 0 20rpx;
        line-height: 40rpx;
        .left {
            position: relative;
            float: left;
            padding-left: 16rpx;
            &::before {
                position: absolute;
                content: '';
                left: 0;
                width: 8rpx;
                top: 50%;
                margin-top: -16rpx;
                height: 32rpx;
                background: linear-gradient(#f29a71, #ff2d46);
            }
            .tit {
                font-size: 34rpx;
                color: #333;
                font-weight: bold;
            }
        }
        .right {
            float: right;
            font-size: 26rpx;
            color: #999;
        }
    }
</style>
